<template>
	<view class="content-index">
		<view class="top-btn">
			<view class="start" @click="checkBlue">
				开始检索
			</view>
			<view class="end" @click="stopBluetoothDevicesDiscovery">
				停止检索
			</view>
		</view>
		
		<view class="bluetooth-list">
			<view v-if="sreatch" class="text">
				检索中...
			</view>
			<view class="items text-ll" @click="contents(item)" v-for="(item,index) in list" :key="index">
				{{item['name'] ? item['name'] : item['deviceId']}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sreatch: false,
				list: [],
				seviceList: [],
				curDeviceName: '无绑定',
				deviceId: '',
			}
		},
		onLoad() {
			// this.checkBlue();

		},
		watch: {
			list: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			checkBlue() { // 先检查设备是否开启来呀
				const that = this;
				if (this.sreatch) {
					return
				}
				uni.openBluetoothAdapter({
					success: (res) => { //已打开
						uni.showToast({
							icon: 'none',
							title: '查看手机蓝牙已打开'
						});
						// 开始收缩附近蓝牙设备
						this.startBluetoothDeviceDiscovery();
					},
					fail: err => { //未打开 
						uni.showToast({
							icon: 'none',
							title: 'openBluetoothAdapter报错'
						});
					}
				})
			},
			startBluetoothDeviceDiscovery() {
				const that = this;
				uni.startBluetoothDevicesDiscovery({
					success: (res) => {
						console.log('startBluetoothDevicesDiscovery success', JSON.stringify(res))
						// 发现外围设备
						that.sreatch = true;
						this.onBluetoothDeviceFound()
					},
					fail: err => {
						console.log(err, '错误信息')
					}
				})
			},
			onBluetoothDeviceFound() {
				uni.onBluetoothDeviceFound((res) => {
					console.log(res)
					if (this.list.indexOf(res.devices[0].deviceId) == -1 && res.devices[0].name !== '') {
						this.list.push({
							name: res.devices[0].name,
							deviceId: res.devices[0].deviceId
						})
					}
				})
			},
			stopBluetoothDevicesDiscovery() {
				uni.stopBluetoothDevicesDiscovery({
					success: e => {
						this.loading = false
						this.sreatch = false;
						console.log('停止搜索蓝牙设备:' + e.errMsg);
					},
					fail: e => {
						console.log('停止搜索蓝牙设备失败，错误码：' + e.errCode);
					}
				});
			},
			contents(item) {
				uni.showLoading({
					title: '加载中'
				});
				let thit = this
				//data里面建立一个deviceId，存储起来
				//连接蓝牙
				uni.createBLEConnection({
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: item.deviceId,
					success(res) {
						//防止在这里面取不到this，古在外面用thit存储了this
						uni.hideLoading();
						thit.stopBluetoothDevicesDiscovery()
						uni.showToast({
							icon: 'none',
							title: '连接成功'
						});
						uni.setStorageSync('deviceId', item.deviceId)
						uni.setStorageSync('deviceName', item.name)
						uni.navigateTo({
							url: `/pages/characteristic/index`
						})
					},
					fail(res) {
						uni.hideLoading();
						uni.setStorageSync('deviceId', item.deviceId)
						uni.setStorageSync('deviceName', item.name)
						uni.navigateTo({
							url: `/pages/characteristic/index`
						})

					}
				})
				console.log(item)
			},
		}
	}
</script>

<style>
	.content-index {
		display: flex;
		flex-direction: row;
		background: #0f3854;
		background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
		width: 100%;
		height: 100%;
		/* z-index: 1; */
		position: fixed;
	}

	.text {
		font-family: "Share Tech Mono", monospace;
		color: #ffffff;
		/* text-align: center; */
		color: #daf6ff;
		text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
	}
	.text-ll {
		font-family: "Share Tech Mono", monospace;
		color: #ffffff;
		/* text-align: center; */
		color: #daf6ff;
		text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
	}

	.top-btn {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
		margin-left: 50px;
		display: flex;
	}

	.start {
		border:1px solid #0aafe6;
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #0aafe6;
		text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
	}

	.end {
		width: 80px;
		height: 80px;
		background-color: darkgray;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.bluetooth-list {
		width: 80%;
		height: 90%;
		overflow: scroll;
	}
	.items {
		height: 30px;
		margin-top: 20px;
	}

	.textsss {
		width: 90%;
		word-wrap: break-word;
	}
</style>
